<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue插槽（slot）</title>
</head>
<body>
  <script src="./js/vue2.js"></script>
  <div id="app">
    <!-- 父组件向子组件传递标签 -->
    <!-- <child content="<p>hi</p>"></child> -->
    
    <!-- 插槽： 直接在父组件中写需要传递的标签 -->
    <child>
      <!-- 在父组件中直接写需要传入的标签内容 -->
      <!-- 不传则使用默认插槽 -->
      <!-- <div slot="header">header</div> -->
      <div slot="footer">footer</div>
    </child>
  </div>
</body>
</html>
<script>

  Vue.component('child', {
    props: ['content'],
    // template: `
    //   <div>
    //     <p>hello</p>
    //     <div v-html="content"></div>
    //   </div>
    // `,

    // slot 中的就是父组件中传进来的dom元素
    template: `
      <div>
        <slot name="header"><h1>默认header</h1></slot>
        <p>hello</p>
        <slot name="footer">默认footer</slot>
      </div>
    `,
  });

  var vm = new Vue({
    el: '#app',

  });

  /**
    slot 插槽
    直接在父组件中写，通过 slot 指定不同的组件，在子组件模板中 name 来区分
    子组件中 slot 中书写默认显示内容，如果父组件中没有传入，则显示默认内容

    即 具名插槽
      可以有多个

  */

</script>